// 1.提供一个能够显示YMessage组件函数
// 2.这个函数将来：导入直接使用，也可以挂载在vue实例原型上
// import Message from 'Message.js' 使用 Message({type: '',text: '提示文字',})
// this.$message({type: '',text: ''})
import { createVNode, render } from 'vue'
import YMessage from './index.vue'

const div = document.createElement('div')
div.setAttribute('class', 'y-message-container')
document.body.appendChild(div)

let timer: any = null
export default function ({ type, text }: { type: string; text: string }) {
  // 渲染组件
  // 1.导入消息组件提示框
  // 2.将消息提示组件编译成虚拟节点（dom节点）
  // carateVNode(组件实例，参数)
  const vnode = createVNode(YMessage, { type, text })
  // 3.准备一个装载消息提示组件的容器
  // 4.将虚拟节点渲染到容器上
  render(vnode, div)
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}